<!--
 * @Author: 计都 3038199036@qq.com
 * @Date: 2024-09-24 16:23:19
 * @LastEditors: 计都 3038199036@qq.com
 * @LastEditTime: 2024-10-11 11:07:58
 * @FilePath: \express_file_upload-master\views\handleFile.html
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>文件归档</title>
    <style>
        @font-face {
            font-family: "baseFont";
            src: url("/static/font/OPPOSans-B-2.ttf");
        }

        * {
            font-family: "baseFont";
            font-weight: bolder;
            box-sizing: border-box;
            margin: 0;
            padding: 0;
            text-decoration: none;
            word-wrap: break-word;
            word-break: keep-all;
            scrollbar-width: none;
            /* firefox */
            -ms-overflow-style: none;
            /* IE 10+ */
        }

        *::-webkit-scrollbar {
            display: none;
            /* Chrome Safari */
        }

        button {
            position: absolute;
            right: 20px;
            border: none;
            border-radius: 1rem;
            background-color: #414181;
            color: white;
            padding: 0 5px;
            font-size: 15px;
            font-weight: 300;
        }

        button:active {
            background-color: white;
            color: #414181;
        }

        .methodBtn {
            top: 12px;
            right: 13px;
            font-size: 13px;
            background-color: white;
            color: #414181;
        }

        li {
            margin-top: 10px;
            border-bottom: 1px solid white;
        }

        /* 
        body {
            background-color:#d6d6e5;
        } */
        .bg_container {
            position: fixed;
            top: 0;
            left: 0;
            z-index: -999;
            width: 100vw;
            height: 100vh;
            background: linear-gradient(45deg,
                    #3498db,
                    #2ecc71);
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
            overflow: hidden;
        }

        .bg_container::before {
            content: "";
            position: fixed;
            top: 0;
            left: 0;
            z-index: -999;
            width: 100vw;
            height: 100vh;
            background-image: linear-gradient(90deg,
                    rgba(255, 255, 255, 0.1) 1px,
                    transparent 1px),
                linear-gradient(rgba(255, 255, 255, 0.1) 1px, transparent 1px);
            background-size: 20px 20px;
            pointer-events: none;
        }

        h4 {
            background-color: #414181;
            color: white;
            text-indent: 20px;
            padding: 10px;
            margin: 10px;
            border-radius: 1rem;
        }

        .FoHolder {
            position: relative;
            left: 10px;
            display: inline-flex;
            flex-direction: column;
            justify-content: left;
            width: calc(100% - 130px);
        }

        #filelist_other>div,
        .section,
        .root {
            position: relative;
            margin: 10px;
            background-color: #d6d6e5c5;
            color: #414181;
            padding: 10px 10px 10px 40px;
            margin: 0 10px 10px 10px;
            border-radius: 1rem;
            /* width: calc(100% - 20px); */
        }

        .root span,
        #filelist_other>div span {
            display: block;
            /* position: relative; */
            background-color: #414181;
            color: white;
            border-radius: 1rem;
            padding: 0 35px 0 20px;
            margin-right: 20px;
            /* min-width: none; */
            width: 100%;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }

        .section {
            display: flex;
            flex-wrap: nowrap;
            justify-content: left;
            align-items: center;
            padding: 5px;
            gap: 10px;
        }

        .section>a {
            font-size: 12px;
            background-color: #414181;
            border-radius: 1rem;
            padding: 5px 20px 5px 20px;
            color: white;
            border: 1px solid #414181;
            transition: all .3s cubic-bezier(0, 0, 0, 1);
        }

        .section>a:hover {
            background-color: #d6d6e5;
            color: #414181;
        }

        .folderOptions {
            position: sticky;
            float: left;
            top: 10px;
            left: 10px;
            width: 120px;
            height: 50vh;
            padding: 5px;
            border-radius: 1rem;
            background-color: #d6d6e5;
            font-size: 15px;
            overflow-y: scroll;
            transition: height .3s cubic-bezier(0, 0, 0, 1);
        }



        .folderOptions form {
            display: flex;
            flex-wrap: wrap;
            flex-direction: column;
            box-sizing: border-box;
        }

        .folderOptions label {
            display: flex;
            cursor: pointer;
            font-weight: 500;
            position: relative;
            overflow: hidden;
            margin-bottom: 0.375em;
            width: 100%;
        }

        .folderOptions label input {
            position: absolute;
            left: -9999px;
        }

        .folderOptions label input:checked+div {
            background-color: #414181;
            color: white;
        }

        .folderOptions label input:checked+div:before {
            box-shadow: inset 0 0 0 0.4375em #00005c;
        }

        .folderOptions label div {
            display: flex;
            align-items: center;
            padding: 0.375em 0.75em 0.375em 0.375em;
            border-radius: 99em;
            width: 100%;
            min-width: 0;
            transition: 0.25s ease;
            color: #414181;
        }

        .folderOptions label div span {
            /* width: 100%; */
            flex: 1;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }

        .folderOptions label div:hover {
            background-color: #d6d6e5;
        }

        .folderOptions label div:before {
            display: flex;
            flex-shrink: 0;
            content: "";
            background-color: #fff;
            width: 1.5em;
            height: 1.5em;
            border-radius: 50%;
            margin-right: 0.375em;
            transition: 0.25s ease;
            box-shadow: inset 0 0 0 0.125em #00005c;
        }

        #shader {
            z-index: 9;
            position: fixed;
            top: 0;
            left: 0;
            height: 100%;
            width: 100%;
            background-color: #41418110;
            -webkit-backdrop-filter: blur(3px);
            backdrop-filter: blur(3px);
            display: none;
            opacity: 0;
            transition: opacity 0.3s linear;
        }

        #pop {
            z-index: 10;
            position: fixed;
            right: 10px;
            right: -270px;
            /* top: 10px; */
            width: 270px;
            min-height: 100px;
            border-radius: 1rem;
            background-color: #d6d6e5;
            border: 1px solid #414181;
            font-size: 12px;
            transition: right .5s cubic-bezier(0, 0, 0, 1);
        }

        #pop>span {
            /* color: #414181; */
            background-color: #414181;
            color: white;
            padding: 0 10px;
            border-radius: 1rem;
            font-weight: 100;
            position: relative;
            top: 5px;
            left: 10px;
            font-size: 14px;
        }

        #pop>button {
            top: 5px;
            right: 5px;
        }

        .newDir {
            position: absolute;
            bottom: -35px;
            border-radius: 1rem;
            background-color: #d6d6e5;
            width: 100%;
            height: 30px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            border: 1px solid #414181;

        }

        .newDir>button {
            right: 5px;
            font-size: 12px;
            font-weight: 300;
        }

        .newDir>input {
            position: relative;
            left: 5px;
            border-radius: 1rem;
            border: 1px solid #414181;
            font-size: 12px;
            font-weight: 500;
        }

        #dirName {
            text-indent: 10px;
            color: #414181;
        }

        #dirMove {
            position: relative;
            left: 5px;
            color: #414181;
        }

        #dirMove label {
            display: inline-block;
            width: calc(100% - 30px);
            border-bottom: 1px solid #fff;
            text-indent: 10px;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }

        #dirMove input {
            height: 15px;
            width: 15px;
            /* position: relative; */
            /* top: 1px; */
        }

        #dirMoveBtn {
            position: relative;
            left: calc(100% - 55px);
            border-radius: 1rem;
            background-color: #414181;
            color: white;
            padding: 0 10px;
            border: none;
            font-weight: 100;
        }

        .pathHolder {
            position: relative;
            left: 5px;
            font-size: 10px;
            font-weight: bolder;
            color: #414181;
        }

        .pathHolder span {
            font-weight: 300;
        }

        .downloadBtn {
            background-color: #414181;
            color: white;
            font-weight: 100;
            font-size: x-small;
            padding: 1px 10px;
            border-radius: 1rem;
            /* opacity: .5;
            transition: opacity .5s cubic-bezier(0, 0, 0, 1); */
        }
    </style>
</head>

<body>
    <h4>文件归档</h4>
    <div id="shader" onclick="cancel()"></div>
    <div id="pop">
        <span>选择已有目录</span>
        <button onclick="cancel()">取消</button>
        <div style="margin: 10px 0;">
            <form id="dirMoveHolder">
                <div id="dirMove"></div>
                <br />
            </form>
            <div class="pathHolder">Target-Path:<span id="path">xxxxxx</span></div>
            <button id="dirMoveBtn" onclick="sendDir()">移入</button>
        </div>
        <div class="newDir">
            <input type="text" id="dirName" placeholder="请输入新目录名">
            <button id="createBtn">创建并移入</button>
        </div>
    </div>
    <div class="section">
        <a href="/filelist">文件列表</a>
        <a href="/">上传文件</a>
        <span id="checkSafety">未通过检查&nbsp;<a href="/" style="color: crimson;">去检查</a></span>
    </div>
    <div class="root">
        <div>
            <span>全部Root文件</span>
        </div>
        <ul id="filelist_res"></ul>
    </div>

    <div class="folderOptions">
        <!-- <span style="font-size: 12px;text-align: center;width: 100%;">其他文件夹文件</span> -->
        <form id="folderOpt">
            <label>
                <input type="radio" name="radio" value="all" checked="">
                <div><span>全部</span></div>
            </label>
        </form>
    </div>
    <div class="FoHolder">
        <ul id="filelist_other"></ul>
    </div>
    <div class="bg_container"></div>
</body>
<script src="/static/jquery.js"></script>
<script>
    $(function () {
        addFolder();
        createFolder();
        cleanEmptyFolder();
        // 实时监听输入框修改
        $("#dirName").on('input propertychange', function () {
            var dirName = $('#dirName').val().replace(/\s*/g, "");
            if (dirName !== '') {
                $('#path').text("upload/" + dirName + "/" + DirPath);
            } else {
                $('#path').text("upload/" + DirPath);
            }
        });
    })
    $(function () {
        if (sessionStorage.getItem('token') !== '') {
            $.ajax({
                type: 'POST',
                url: '/stats',
                headers: {
                    Authorization: 'Bearer ' + sessionStorage.getItem('token')
                },
                success: function (response) {
                    console.log(response.SS);
                    if (response.SS) {
                        $('#checkSafety').text('');
                    }
                },
            })
        }
    })
    const folderOptions = document.querySelector('.folderOptions');
    function checkPosition() {
        const rect = folderOptions.getBoundingClientRect();
        if (rect.top < 11) {
            folderOptions.style.height = 'calc(100vh - 20px)';
            // folderOptions.style.height = '100%';

        } else {
            folderOptions.style.height = '50vh';
        }

    }
    window.addEventListener('load', checkPosition);
    window.addEventListener('scroll', checkPosition);
    function changeSections() {
        $('#folderOpt').off('change').on('change', function () {
            const selectedValue = $(this).find('input:checked').val();
            $('#filelist_other div').each(function () {
                const divId = $(this).attr('id');
                if (selectedValue == 'all' || divId == selectedValue) {
                    $(this).show();
                } else {
                    $(this).hide();
                }
            });
        });
    }
    let DirPath = '';
    function handleDir(path) {
        document.getElementById('pop').style.right = '10px';
        document.getElementById('shader').style.display = 'block';
        setTimeout(() => {
            document.getElementById('shader').style.opacity = '1';
        }, 0);
        DirPath = path.split('/').pop();
        // console.log(DirPath);
        $('#path').text("upload/" + DirPath)
    }
    let Dir = ''
    $(document).ready(function () {
        $('#dirMoveHolder').change(function () {
            var selectedDir = '';
            // Dir = '';
            var selectedValue = $(this).find('input:checked').val();
            Dir = "upload/" + selectedValue + "/" + DirPath;
            $('#path').text(Dir)
            // console.log(Dir);
            // DirPath = Dir;
        });
    });
    function sendDir() {
        var param = { "filePath": "upload/" + DirPath, "dirPath": Dir };
        console.log(param)
        if (confirm('确定移动?')) {
            $.ajax({
                type: 'POST',
                url: '/movein',
                data: JSON.stringify(param),
                contentType: 'application/json',
                headers: {
                    Authorization: 'Bearer ' + sessionStorage.getItem('token')
                },
                success: function (data) {
                    window.location.reload();
                },
                error: function (xhr, status, error) {
                    console.error('未通过安全检查：', error);
                    alert('未通过安全检查');
                }
            })
        }
        return false;
    }
    function cancel() {
        document.getElementById('pop').style.right = '-270px';
        DirPath = '';
        Dir = '';
        $('#path').text("xxxxxx")
        $('#dirMoveHolder input[type="radio"]').prop('checked', false);
        document.getElementById('shader').style.display = 'none';
        setTimeout(() => {
            document.getElementById('shader').style.opacity = '0';
        }, 0);
    }
    function cleanEmptyFolder() {
        $.ajax({
            type: 'GET',
            url: '/clearEmptyFolders',
            headers: {
                Authorization: 'Bearer ' + sessionStorage.getItem('token')
            },
        })
        return false;
    }
    function moveFile(path) {
        var param = { "filePath": path };
        console.log(path)
        if (confirm('确定移出?')) {
            $.ajax({
                type: 'POST',
                url: '/moveout',
                data: JSON.stringify(param),
                contentType: 'application/json',
                headers: {
                    Authorization: 'Bearer ' + sessionStorage.getItem('token')
                },
                success: function (data) {
                    window.location.reload();
                }
            })
        }
        return false;
    }
    function createFolder() {
        $.ajax({
            type: "GET",
            url: '/getFileOrganization',
            headers: {
                Authorization: 'Bearer ' + sessionStorage.getItem('token')
            },
            success: function (data) {
                console.log(JSON.stringify(data) + "文件夹详情");
                $.each(data, function (index, item) {
                    const folder = item.name;
                    if (folder !== 'root') {
                        $('#filelist_other').append(`
                        <div id="${item.name}"><span>目录:${item.name}</span><button class="methodBtn" onclick="MoveFilesDir(this)">解散</button></div>
                    `);
                        $('#folderOpt').append(`
                        <label><input type="radio" value="${item.name}" name="radio"><div><span>${item.name}</span></div></label>
                    `);
                        $('#dirMove').append(`
                        <input type="radio" id="dir${item.name}" name="dir" value="${item.name}"><label for="dir${item.name}">${item.name}</label><br>                    
                    `);
                    }
                })
                init();
            },
            error: function (xhr, status, error) {
                console.error('请求失败：', error);
            }
        })
        changeSections();
    }

    function init() {
        $.ajax({
            type: 'GET',
            url: '/getFileList',
            headers: {
                Authorization: 'Bearer ' + sessionStorage.getItem('token')
            },
            success: function (data) {
                // console.log(data + "文件列表");

                // 创建一个 Map 来存储文件夹名称和对应的文件数量
                const folderCounts = new Map();

                // 遍历数据，统计文件夹种类，并区分 root 文件夹
                $.each(data, function (index, item) {
                    const folder = item.folder;
                    folderCounts.set(folder, (folderCounts.get(folder) || 0) + 1); // 统计每个文件夹出现的次数

                    if (folder === 'root') {
                        $('#filelist_res').append(`
                        <li><a href="/download?path=${item.path}" class="downloadBtn">下载</a> <a>${item.name}&nbsp;&nbsp;&nbsp;<button onclick="handleDir('${item.path}')">操作</button></a></li>
                    `);
                    }
                    else {
                        $('#' + item.folder).append(`
                        <li><a href="/download?path=${item.path}" class="downloadBtn">下载</a> <a>${item.name}&nbsp;&nbsp;&nbsp;<button onclick="moveFile('${item.path}')">移出</button></a></li>
                    `);
                    }
                });

                // 打印不同 folder 的名称和数量
                console.log('不同的 folder 及其数量：');
                for (const [folder, count] of folderCounts) {
                    console.log(`${folder}: ${count} 个`);
                }
            },
            error: function (xhr, status, error) {
                console.error('请求失败：', error);
            }
        });
    }
    function addFolder() {
        $('#createBtn').click(function () {
            const directoryName = $('#dirName').val();

            // 验证输入
            if (!directoryName) {
                alert('请输入目录名');
                return;
            }
            // alert("upload/" + directoryName + "/" + DirPath,);
            Dir = "upload/" + directoryName + "/" + DirPath;
            $.ajax({
                url: '/createDirectory',
                type: 'POST',
                contentType: 'application/json', // 简写方式
                data: JSON.stringify({ directoryName }),
                headers: {
                    Authorization: 'Bearer ' + sessionStorage.getItem('token')
                },
                success: (data) => {
                    alert(data.message);
                    // window.location.reload();
                    var param = { "filePath": "upload/" + DirPath, "dirPath": Dir };
                    console.log(param)
                    $.ajax({
                        type: 'POST',
                        url: '/movein',
                        data: JSON.stringify(param),
                        contentType: 'application/json',
                        headers: {
                            Authorization: 'Bearer ' + sessionStorage.getItem('token')
                        },
                        success: function (data) {
                            DirPath = '';
                            Dir = '';
                            window.location.reload();
                        }
                    })
                },
                error: (error) => {
                    alert('创建目录失败：' + error.responseText);
                }
            });
        });
    };

    function MoveFilesDir(obj) {
        // alert(obj.parentNode.id);
        var name = obj.parentNode.id;
        var param = { "dirName": name };
        if (confirm('确定解散?')) {
            $.ajax({
                type: 'POST',
                url: '/migrateFiles',
                data: JSON.stringify(param),
                contentType: 'application/json',
                headers: {
                    Authorization: 'Bearer ' + sessionStorage.getItem('token')
                },
                success: function (data) {
                    window.location.reload();
                },
                error: function (xhr, status, error) {
                    console.error('未通过安全检查：', error);
                    alert('未通过安全检查');
                }
            })
        }
    }
</script>

</html>